<template>
	<view>
		<search_n></search_n>
		<view class="activeIcon">
			<view class="keshilist">
				<view class="keshilist_cont" id="keshilist_cont">
					<text :class="curData==1?'texts active':'texts'" @click="getHospitalData(1)">肛肠科</text>
					<text :class="curData==2?'texts active':'texts'" @click="getHospitalData(2)">肛肠科</text>
					<text :class="curData==3?'texts active':'texts'" @click="getHospitalData(3)">肛肠科</text>
					<text :class="curData==4?'texts active':'texts'" @click="getHospitalData(4)">肛肠科</text>
					<text :class="curData==5?'texts active':'texts'" @click="getHospitalData(5)">肛肠科</text>
					<text :class="curData==6?'texts active':'texts'" @click="getHospitalData(6)">肛肠科</text>
				</view>
			</view>
			<view class="keshi_list_image">
				<image src="/static/4549.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="doctorList_body">
			<view class="doctorList_item">
				<view class="d_headbox">
					<image src="/static/5909.png" mode="aspectFit"></image>
					<view class="d_headbox_title_box">
						<view class="d_headbox_title">
							<view>冯秉权</view>
							<view class="keshis">男科</view>
						</view>
						<text>武汉阿波罗医院</text>
					</view>
				</view>
				<text class="shanchangs">擅长：男性不育，性功能障碍泌尿生殖系统疾病的治疗。</text>
				<view class="pingpins">
					<view class="pingluns">好评率：<text>87</text> 预约量：<text>420</text> 粉丝量：<text>484</text></view>
					<view class="butts" @click="goyuyue">去预约</view>
				</view>
			</view>
			<view class="doctorList_item">
				<view class="d_headbox">
					<image src="/static/5909.png" mode="aspectFit"></image>
					<view class="d_headbox_title_box">
						<view class="d_headbox_title">
							<view>冯秉权</view>
							<view class="keshis">男科</view>
						</view>
						<text>武汉阿波罗医院</text>
					</view>
				</view>
				<text class="shanchangs">擅长：男性不育，性功能障碍泌尿生殖系统疾病的治疗。</text>
				<view class="pingpins">
					<view class="pingluns">好评率：<text>87</text> 预约量：<text>420</text> 粉丝量：<text>484</text></view>
					<view class="butts" @click="goyuyue">去预约</view>
				</view>
			</view>
			<view class="doctorList_item">
				<view class="d_headbox">
					<image src="/static/5909.png" mode="aspectFit"></image>
					<view class="d_headbox_title_box">
						<view class="d_headbox_title">
							<view>冯秉权</view>
							<view class="keshis">男科</view>
						</view>
						<text>武汉阿波罗医院</text>
					</view>
				</view>
				<text class="shanchangs">擅长：男性不育，性功能障碍泌尿生殖系统疾病的治疗。</text>
				<view class="pingpins">
					<view class="pingluns">好评率：<text>87</text> 预约量：<text>420</text> 粉丝量：<text>484</text></view>
					<view class="butts" @click="goyuyue">去预约</view>
				</view>
			</view>
			<view class="doctorList_item">
				<view class="d_headbox">
					<image src="/static/5909.png" mode="aspectFit"></image>
					<view class="d_headbox_title_box">
						<view class="d_headbox_title">
							<view>冯秉权</view>
							<view class="keshis">男科</view>
						</view>
						<text>武汉阿波罗医院</text>
					</view>
				</view>
				<text class="shanchangs">擅长：男性不育，性功能障碍泌尿生殖系统疾病的治疗。</text>
				<view class="pingpins">
					<view class="pingluns">好评率：<text>87</text> 预约量：<text>420</text> 粉丝量：<text>484</text></view>
					<view class="butts" @click="goyuyue">去预约</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import search_n from '/pages/common/search_n.vue';
	export default {
		data() {
			return {
				curData: 1
			}
		},
		methods: {
			getHospitalData(obj) {
				this.curData = obj;
			},
			goyuyue:function(){
				uni.navigateTo({
					url: '/pages/searchDoctor/doctor_detail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
		},
		created() {

		},
		components: {
			search_n
		}
	}
</script>

<style scoped>
	.keshilist {
		width: 90%;
		overflow-x: scroll;
		display: flex;
	}

	.keshilist_cont {
		display: flex;
		padding: 15px 0;
		flex: none;
	}

	.keshilist image {
		width: 10%;
	}

	.keshilist_cont text {
		font-size: 14px;
		padding: 15px;
		flex: none;
		font-weight: bold;
		position: relative;
	}

	.keshilist_cont text.active::after {
		position: absolute;
		content: "";
		height: 3px;
		width: 15px;
		background-color: #07BF64;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.activeIcon {
		position: relative;
	}

	.keshi_list_image {
		width: 30px;
		height: 30px;
		position: absolute;
		right: 10px;
		top: 26px;
	}

	.keshi_list_image image {
		width: 30px;
		height: 30px;
	}

	.keshis {
		width: fit-content;
		background-color: aqua;
		color: #fff;
		font-size: 12px;
		border-radius: 2px;
		line-height: 20px;
		margin-left: 5px;
	}

	.doctorList_body {
		width: 94%;
		margin-left: 3%;
	}

	.doctorList_item {
		display: flex;
		flex-direction: column;
		margin-bottom: 30px;
	}

	.d_headbox {
		display: flex;
	}

	.d_headbox image {
		width: 50px;
		height: 50px;
	}

	.d_headbox_title_box {
		display: flex;
		flex-direction: column;
		margin-left: 10px;
	}

	.d_headbox_title_box text {
		font-size: 12px;
		margin-top: 5px;
	}

	.d_headbox_title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.shanchangs {
		font-size: 14px;
		margin: 5px 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.pingpins {
		font-size: 12px;
		display: flex;
		justify-content: space-between;
		margin-top: 8px;
	}

	.pingpins text {
		color: red;
	}

	.butts {
		background-color: #07BF64;
		color: #fff;
		padding: 3px;
		border-radius: 3px;
	}

	.doctorList_body {
		margin-top: 15px;
	}
</style>